<template>
    <div class="headerWrap">
        <div class="left">
            <div class="left-1">
                    <img src="@/assets/menu1.svg" alt="menu"  @click="drawShow" class="menu">
                <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
            </div>
            <div class="left-right">
                <div class="search" @click="handlesearch">
                    <img src="@/assets/home.svg" alt="找不到图片">
                </div>

                <div class="langWrap">
                    <img src="@/assets/setting.svg" @click="handleShowLang" class="second">
                    <Lang ref="lang" class="lang" />
                </div>
            </div>


        </div>
        <div class="right" v-if="data1!=null">
            <li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
            <!-- <li class="show">
                <span>Show Value</span>
                <el-switch v-model="value" size="small" style="--el-switch-on-color: #750000" />
            </li> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import i18n from '@/locales'
import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue'
import Lang from "@/views/login/components/Lang.vue";
import { conforms } from 'lodash';
import { ipoStore } from '@/stores/ipo';
const { proxy } = (getCurrentInstance() as any)
const value = ref(true)

const lang = ref()
const handleShowLang = (e: any) => {
   // console.log(1111)
    e.stopPropagation()
    lang.value.showLang = !lang.value.showLang
}
const data1 = ref()
const store = ipoStore()
onMounted(() => {
    // document.documentElement.onclick = function () {
    //     if (!lang.value.showLang) return
    //     lang.value.showLang = false
    // }
    document.documentElement.addEventListener('click',function(){
        if (!lang.value?.showLang) return
        if(lang.value){
            lang.value.showLang = false
        }
       
    })
    const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
    // obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
   data1.value = obj
})
onUnmounted(() => {
    // document.documentElement.onclick = null
})
const props = defineProps({
    time: [String, Number],
    openDrawer: {
        required: true,
        type: Function
    }
})
const handlesearch = () => {
    proxy.$router.push("/home")
    store.setMobileActiveShow(1)
}
const drawShow = () => {
    console.log(1111);
    props.openDrawer();
}
</script>

<style lang="scss" scoped>


.langWrap {
    position: relative;
    margin-left: 15px;
    @media screen and (max-width: 768px) {
      display: none;
    }
    .second {
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
}

.lang {
    position: absolute;
    top: 50px;
    left: -50px;

    @media screen and (max-width: 768px) {
        left: -120px;

    }
}

.left-right {
    display: flex;
    align-items: center;
   margin-left: 10px;
}

.headerWrap {
    display: flex;
    // justify-content: space-between;
    padding-top: 40px;
    transform: translateY(-20px);
    height: 50px;
    width: 94%;
    li{
        margin: 0;
        padding: 0;
        
    }
    
    @media screen and (max-width: 768px) {
        flex-direction: column;
       position: relative;
        .left-1 {
            display: flex;
            margin-left: 5vw;
           span{
            margin-left: 10px;
           }
           height: 30px;
           align-items: center;
        }

        .left-right {
            display: flex;
            margin-right: 5vw;
        }
    }

    .left {
        display: flex;
        width: fit-content;
        @media screen and (max-width: 768px) {
            justify-content: space-between;
            width: 100vw;
            align-items: center;
        }

        .menu {
            display: none;

            @media screen and (max-width: 768px) {
                display: block;
                width: 25px;
                height: 20px;
            }
        }

        span {
            color: #2B4A60;
            font-size: 45px;
            font-weight: 900;
            min-width: 200px;
            @media screen and (max-width: 768px) {
                font-size: 24px;
            }
        }
        
        
        .search {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            img {
                width: 30px;
                height: 30px;
                @media screen and (max-width: 768px) {
              width: 25px;
              height: 25px;
            }
            }
            
        }
    }

    .right {
        font-size: 20px;
        min-width: 50px;
        margin-top: 7px;
        margin-left: 380px;
        @media screen and (max-width: 768px) {
             width: 90vw;
            margin-top: 2vh;
            margin-left: 5vw;
            display: flex;
            justify-content: end;
        }

        .time {
            color: #1C3F56;
            margin-top: 10px;

            @media screen and (max-width: 768px) {
       
                font-size: 15px;

            }
        }

    }
}
</style>